<template>
	<view>
		<u-navbar title="修改手机号码" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight">
		</u-navbar>
		<view class="padding-lr padding-bottom margin radius-10 text-black0 bg-white">
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w font-13">旧手机号码</view>
				<view class="flex-grow">
					<input class="font-13" v-model="userInfo.mobile" disabled/>
				</view>
			</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w font-13">新手机号码</view>
				<view class="flex-grow">
					<input class="font-13" placeholder="请输入新手机号码" v-model="mobile"/>
				</view>
			</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w font-13">验证码</view>
				<view class="flex-grow">
					<input class="font-13" placeholder="请输入验证码" maxlength="6" v-model="code"/>
				</view>
				<view class="text-theme text-bold" style="width: 136rpx;" @click="onCode" v-if="show">发送验证码</view>
				<view class="text-black9 text-bold" style="width: 260rpx;" v-else>获取验证码（{{count}}）</view>
			</view>

			<view class="btn" @click="submit">确定修改</view>
		</view>
		
	</view>
</template>

<script>
	import {newSendCode} from '@/common/api/api.js'
	import {customerInfo, changeAssetMobile} from '@/common/api/customer.js'
	import { Debounce } from "@/common/utils/tools.js";
	export default {
		data() {
			return {
				code: '',
				show: true,
				count: 0,
				mobile: '',
				userInfo: {}
			};
		},
		onLoad() {
			this.getCustomerInfo()
		},
		methods: {
			// 获取用户信息
			getCustomerInfo() {
				customerInfo().then(res => {
					this.userInfo = res.data || {}
					this.$store.commit('user/setUserInfo', res.data || {})
				})
			},
			onCode:Debounce(function (e) {
				if (!this.mobile) {
					return this.$msg('请输入新手机号码')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位新手机号码')
				}
				newSendCode({
					mobile: this.mobile,
					type: 6,
				}).then(res => {
					if (res.code == 200) {
						this.time()
						this.$msg(res.msg)
					} else {
						this.$msg(res.msg)
					}
				})
			},800),
			time() {
				const TIME_COUNT = 180
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			},
			submit:Debounce(function (e) {
				if (!this.mobile) {
					return this.$msg('请输入新手机号码')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位新手机号码')
				}
				if (!this.code) {
					return this.$msg('请输入验证码')
				}
				uni.showLoading({
					title: '修改中',
					mask: false
				})
				changeAssetMobile({
					code: this.code,
					newMobile: this.mobile,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$msg('修改成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.$msg(res.msg)
					}
				}).catch(err=> {
					uni.hideLoading()
				})
			},800),
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 24rpx !important;
	}

	.label-w {
		width: 150rpx;
	}

	.item-bg {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.icon-size {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 100%;
		height: 84rpx;
		margin: 60rpx auto 30rpx auto;
		border-radius: 12rpx;
		background: #e60000;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>